<template>  
  <div class="formSelect">
      <el-select
        v-model="value"
        :multiple='!comData.node.isRadio'
        :placeholder="placeholder"
        clearable
        filterable
        ref='selectRadio'
        @change='handleChange'>
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          <template>
            <div>
              <span :style="listColor(item)">{{ item.label }}</span>
            </div>
          </template>
        </el-option>
      </el-select>
    </div>
</template>

<script>
export default {
  props:{
    label:{
        type: Object,
        default: () => {}
    },
    placeholder:{
        type:String,
        default:''
    },
    comData: {
        type:Object,
        default:()=>({})
    }
  },
  data() {
    return {
      value: '',
      options: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.options = JSON.parse(JSON.stringify(this.comData.node.options))
      this.value = this.comData.node.default
      this.handleChange(this.value)
    })
  },
  methods: {
    handleChange(val) {
      let obj = {}
      obj[this.label.label] = this.comData.node.isRadio ? this.value : val
      this.$emit('setFormData', obj)
      this.$nextTick(() => {
        this.styleSet()
        this.$refs.selectRadio.blur()
      })
    },
    changeCache(res){
      this.value = res
    },
    listColor(c) {
      if(this.comData.node.color) {
        let col = JSON.parse(this.comData.node.color)
        let d = col.find(res => { return c.label ==  res.value })
        return {
          'background': (d.color).substr(0, 3) + 'a' + (d.color).substr(3, d.color.length - 4) + ', .1)',
          'color': d.color,
          'padding': '2px 7px',
          'border-radius': '3px',
          'font-size': '13px',
          'line-height': '22px',
          'display': 'inline-block'
        }
      } else {
        return {}
      }
    },
    styleSet() {
      // let d = this.comData.node.options.find(res => { return res.value == this.value })
      let col = []
      let d = null
      if(this.comData.node.color) {
        col = JSON.parse(this.comData.node.color)
        d = col.find(res => { return this.value ==  res.value })
        if(d) {
            this.$refs.selectRadio.$children[0].$el.children[0].style.color = d.color
        } else {
            this.$refs.selectRadio.$children[0].$el.children[0].style.color = '#333'
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>

</style>